<template lang="pug">
.bcg-box(style='display:inline-block')
  #bcg-chart(style='width: 650px;height:350px;margin-left:50px;')
</template>

<script lang="ts">
import {
  // ref,
  defineComponent,
  watch,
  onMounted,
} from "vue";
import * as echarts from "echarts";
export default defineComponent({
  name: "",
  props: {
    chartData: {
      type: Object,
      default: () => Object.create(null),
    },
  },
  setup(props) {
    onMounted(() => {
      drawChart();
    });
    /** echart实例 */
    let myEchart: any;
    const chartOption = {
      // 悬浮窗
      tooltip: {},
      // tooltip: {
      //   formatter: function (param: any) {
      //     console.log(param);
      //     return "<div>" + param.seriesName + "</div>"; // 自定义的 DOM 结构
      //   },
      // },
      // grid 组件离容器左侧的距离
      grid: {
        left: 80,
      },
      legend: {
        left: "center",
        bottom: "bottom",
        itemHeight: 8, // 图例标记的图形高度
        textStyle: {
          padding: [0, 0, 0, -8],
        },
      },
      xAxis: {
        splitNumber: 3,
        inverse: true, // 100 - 0
        name: "市占率", // 这里添加Y周的一个标题
        nameLocation: "center",
        nameGap: 32, //与轴线间距
        // nameRotate: 0,
        type: "value", // 类目轴，适用于连续数据
        boundaryGap: false, // 坐标轴两边留白策略
        // data: [100, 64, 36, 18, 0], // 刻度线数据，只是x轴展示的，数据是需要计算的
        axisLine: {
          // 隐藏x轴
          show: false,
        },
        axisTick: {
          // 隐藏x轴刻度线
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          align: "left",
          // 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
          formatter: function (value, index) {
            // 格式化成月/日，只在第一个刻度显示年份
            // var date = new Date(value);
            // var texts = [(date.getMonth() + 1), date.getDate()];
            // if (index === 0) {
            //     texts.unshift(date.getYear());
            // }
            console.log(value, index);
            // if (value !== 100 || value !== 64) {
            //   return "";
            // } else {
            //   return value + "%";
            // }
            if (index === 0) {
              return "11";
            }
            return "22";
          },
        },
      },
      yAxis: {
        type: "value",
        name: "增\n长\n率", // 这里添加Y周的一个标题
        nameLocation: "center",
        nameGap: 50, //与轴线间距
        nameRotate: 0,
        axisLabel: {
          formatter: "{value}%",
          interval: 0,
        },
        axisTick: {
          // 隐藏y轴刻度线
          show: false,
        },
        axisLine: {
          // 隐藏y轴
          show: false,
        },
        splitLine: {
          //网格线
          lineStyle: {
            type: "dashed", //设置网格线类型 dotted：虚线 solid:实线
          },
        },
      },
      series: [
        {
          name: "欣和（现状）",
          type: "scatter",
          data: [
            [99, 10],
            [7, 99],
            [81, -25],
          ],
          symbolSize: function (data: any) {
            console.log(data);
            // 圆的大小
            return 30;
          },
          markLine: {
            symbol: "none",
            silent: true,
            animation: false,
            label: {
              show: false,
            },
            lineStyle: {
              color: "#DEDEDE",
              type: "solid",
            },
            data: [
              { type: "average", valueDim: "y" },
              { type: "average", valueDim: "x" },
            ],
          },
        },
        {
          name: "欣和（第一年）",
          type: "scatter",
          data: [
            [50, 22],
            [23, 75],
          ],
          // symbolSize: function (data: any) {
          //   // console.log(data);
          //   // 圆的大小
          //   return data / 10;
          // },
        },
        {
          name: "竞品1",
          type: "scatter",
          data: [
            [35, 12],
            [66, 44],
          ],
          // symbolSize: function (data: any) {
          //   // console.log(data);
          //   // 圆的大小
          //   return data / 10;
          // },
        },
        // {
        //   name: "竞品2",
        //   type: "scatter",
        //   data: [3, 5, 15],
        //   symbolSize: function (data: any) {
        //     // console.log(data);
        //     // 圆的大小
        //     return data / 10;
        //   },
        // },
      ],
    };

    const drawChart = async () => {
      myEchart = await echarts.init(document.getElementById("bcg-chart") as HTMLElement);
      console.log(chartOption);
      myEchart.clear();
      myEchart.setOption(chartOption);
    };
    return {};
  },
});
</script>

<style lang="stylus" scoped></style>
